<template>
    <div class=" w-100 h-100">
        <div style="height: 80px;">
            <tablleBar @submit-swich="swichTable" :list="['街道','建设年代']" ></tablleBar>

        </div>
     <div style="height: calc( 100% - 80px);overflow-y: auto;overflow-x: hidden;" class="w-100  autoscoll ">
        <div  :style="{ height: activeItem === 0 ? '600px' : '100px' }"   >
        <div id="fjsrftj" class="w-100 " style="height: 100%;position: relative"> </div>

        </div>
     </div>
    </div>

</template>
    
<script setup lang='ts'>
    import tablleBar from '@/components/project/tablleBar.vue';
import { useFunc } from "@/hook/useFunc";
import * as echarts from 'echarts'

    var yLabel = ['建桥街道', '晴川街道', '鹦鹉街道', '五里墩街道','建桥街道', '晴川街道', '鹦鹉街道', '五里墩街道','建桥街道', '晴川街道', '鹦鹉街道', '五里墩街道']
    var yLabelYear = ['90', '00', '10', '20'];
var yData =[202, 18, 15, 13,202, 18, 15, 13,202, 18, 15, 13]


let option = {
          grid: {
                        left: '%',
                        right: '1%',
                        bottom: '10%',
                        top: '1%',
                        containLabel: true
                 },
          xAxis: {
                        show: false,
                        type: 'value'
                    },
          yAxis: [{
                        type: 'category',
                        inverse: true,
                        axisLabel: {
                            show: true,
                            margin: 25,
                            textStyle: {
                                color: '#00dcf1',
                                fontSize: 19,
                                fontFamily: 'siyuan',
                                fontStyle: 'italic'
                            },

                        },
            // 设置自定义字体样式
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        data: yLabel
                    },
                     {
                        zlevel:3,
                        type: 'category',
                        inverse: true,
                        axisTick: 'none',
                        axisLine: 'none',
                        show: true,
               
                        axisLabel: {
                            textStyle: {
                                color: 'rgba(92, 225, 255, 1)',
                                fontSize: '30',
                                padding: [0, 0, 0, -33],
                                fontFamily:'DIN-Bold',
                                offset:20
                            },
                        formatter: '{value} 个',


                        },
                        data: yData
                    }],
          series: [
            

        // 其他设置
   
                        {
                            name: '人数',
                            type: 'bar',
                            zlevel: 3,
                            itemStyle: {
                                normal: {
                                    //barBorderRadius: [0, 30, 30, 0],
                                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                        offset: 0,
                                        color: 'rgba(4,128,224,0.3)'
                                    }, {
                                        offset: 1,
                                        color: '#01F1E4'
                                    }]),
                                    shadowBlur: 0,
                                    shadowColor: 'rgba(87,220,222,0.7)'
                                },
                            },
                            barWidth: 15,
                            data: yData
                        },
                      
                        { // 背景
                            type: 'pictorialBar',
                            animationDuration: 0,
                            hoverAnimation: false,
                            symbolRepeat: 'fixed',
                            label:{
                                show:false,
                                position:['97%','40%'],
                                fontSize:20,
                                color: '#01F1E4',
                            },
                            legendHoverLink: false,
                            symbolMargin: '10%',
                            symbol: 'roundRect',
                            symbolSize: [5, 35],
                            itemStyle: {
                                normal: {
                                    color: '#12272A',

                                }
                            },
                            data: yData,
                            z: 0,
                        },
                    ]
};
let myChart:any;
const activeItem=ref(0)
    const swichTable=(item:any)=>{
       activeItem.value=item
       if(activeItem.value==0){
      option.yAxis[0].data=yLabel
      option.yAxis[1].data=[202, 18, 15, 13,202, 18, 15, 13,202, 18, 15, 13]
      option.series[0].data=[202, 18, 15, 13,202, 18, 15, 13,202, 18, 15, 13]


       }else{
      option.yAxis[0].data=['90年代', '00年代', '10年代', '20年代']
      option.yAxis[1].data=[23, 128, 80, 10]
      option.series[0].data=[23, 128, 80, 10]
       }
      console.log( option.yAxis[1].data,'收到');
      myChart.re
      myChart.setOption(option)
    }
onMounted(() => {
    myChart = echarts.init(document.getElementById("fjsrftj") as HTMLElement);
    myChart.setOption(option)
    const scrollContainer = document.querySelector('.autoscoll');
useFunc().autoScroll(scrollContainer, 'vertical');
})
</script>
    
<style>
    
</style>